@use 'sass:color';

@mixin button-size($padding-x,$padding-y,$font-size,$border-radius) {
    padding: $padding-y, $padding-x;
    font-size: $font-size;
    border-radius: $border-radius;
}

@mixin button-style(
    $background,
    $border,
    $color,
    $hover-background:color.adjust($background, $lightness: 7.5%),
    $hover-border: color.adjust($border,$lightness: 10%),
    $hover-color: $color
){
    color: $color;
    background-color: $background;
    border-color: $border;
    &:hover{
        color: $hover-color;
        background-color: $hover-background;
        border-color: $hover-border;
    }
    &:focus,&.focus{
        color: $hover-color;
        background-color: $hover-background;
        border-color: $hover-border;
    }
    &:disabled,&.disabled{
        color: $color;
        background-color: $background;
        border-color: $border;
    }
}

@mixin alert-style($background, $border, $color) {
    color: $color;
    background: $background;
    border-color: $border;
  }
  
@mixin zoom-animation(
  $direction: 'top',
  $scaleStart: scaleY(0),
  $scaleEnd: scaleY(1),
  $origin: center top,
) {
  .zoom-in-#{$direction}-enter {
    opacity: 0;
    transform: $scaleStart;
  }
  .zoom-in-#{$direction}-enter-active {
    opacity: 1;
    transform: $scaleEnd;
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transform-origin: $origin
  }
  .zoom-in-#{$direction}-exit {
    opacity: 1;
    transform: $scaleEnd;
  }
  .zoom-in-#{$direction}-exit-active {
    opacity: 0;
    transform: $scaleStart;
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
    transform-origin: $origin;
  }
}

@mixin border-right-radius($raduis) {
  border-top-right-radius: $raduis;
  border-bottom-right-radius: $raduis;
}

@mixin border-left-radius($raduis) {
  border-top-left-radius: $raduis;
  border-bottom-left-radius: $raduis;
}

@mixin border-top-radius($raduis) {
  border-top-left-radius: $raduis;
  border-top-right-radius: $raduis;
}